iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

1 Like 0 留言 63 瀏覽

鐵人賽 Modern Web DAY 10

從 Canvas 到各式各樣的 Web API 之旅系列第 10 篇

技術 Day 10 - 攝影機、麥克風全開！用 MediaDevices Web API 開鏡頭、分享螢幕、錄音

前幾天好累，今天來點輕鬆又有趣的！😇 今天要介紹的是瀏覽器裡的 HTML5 MediaDevices API，透過它我們可以直接存取麥克風與攝影機，這也是...

丸子 ‧ 2025-09-23

2 Like 0 留言 85 瀏覽

鐵人賽 Modern Web DAY 9

從 Canvas 到各式各樣的 Web API 之旅系列第 9 篇

技術 Day 9 - 用 Drag and Drop API 拖曳 DOM 元素

結束了精彩的 Canvas API 系列，接下來要帶大家探索更多有趣又實用的 Web API！🎉 首先登場的是 HTML5 的 Drag and Drop AP...

丸子 ‧ 2025-09-22

3 Like 0 留言 38 瀏覽

鐵人賽 Modern Web DAY 8

從 Canvas 到各式各樣的 Web API 之旅系列第 8 篇

技術 Day 8 - Canvas 跨域安全：理解並避免 Tainted Canvas 問題

最後一篇 Canvas 系列的文章 🎉 來聊聊瀏覽器針對 Canvas 的安全設計。在實作 Canvas 時，常會載入外部圖片當素材（圖庫、S3、CDN）。顯...

丸子 ‧ 2025-09-21

3 Like 0 留言 89 瀏覽

鐵人賽 Modern Web DAY 7

從 Canvas 到各式各樣的 Web API 之旅系列第 7 篇

技術 Day 7 - Canvas 生態圈：Fabric.js 如何幫你簡化複雜繪圖

Day 2–6 我們一路用原生 Canvas 打底。老實說，要畫一個「會動、能拖、還要可重新編輯」的小工具，用原生真的很硬：🥵 你要自己存一份「場景資料」：有...

丸子 ‧ 2025-09-20

3 Like 0 留言 54 瀏覽

鐵人賽 Modern Web DAY 6

從 Canvas 到各式各樣的 Web API 之旅系列第 6 篇

技術 Day 6 - Canvas API 效能最佳化

🧐 上一篇我們談到為什麼在某些情境下必須用 Canvas（像是大量即時繪製、逐像素操作、高自由度變形等）。但光是換成 Canvas 還不夠，如果使用方式不對，...

丸子 ‧ 2025-09-19

0 Like 0 留言 142 瀏覽

技術用錄製自動產生 Web API 請求範本

在我從事 ERP / HRM / BPM 套裝軟體的實務開發經驗中，雖然會提供 API 文件給第三方參考，但實際上大多數人更傾向使用更簡單的錄製方式。這種方...

jeff377 ‧ 2025-09-18

3 Like 0 留言 65 瀏覽

鐵人賽 Modern Web DAY 5

從 Canvas 到各式各樣的 Web API 之旅系列第 5 篇

技術 Day 5 - 已經有 DOM + CSS，為何需要 Canvas！？

🧐 當你想在網頁上做動畫、畫圖表、或遊戲時，第一個問題常是：要用 DOM + CSS？還是直接上 Canvas？ DOM＋CSS 在 UI 介面與靜態排版上有絕...

丸子 ‧ 2025-09-18

3 Like 0 留言 113 瀏覽

鐵人賽 Modern Web DAY 4

從 Canvas 到各式各樣的 Web API 之旅系列第 4 篇

技術 Day 4 - Canvas API 進階用法篇

😀 進入 Canvas 進階！本篇不再只是「畫出東西」，而是學會操作畫布狀態與圖形之間的關係。你將會：用座標變換把圖像轉場、用混色疊出設計感、用像素級處理做特效...

丸子 ‧ 2025-09-17

2 Like 0 留言 60 瀏覽

鐵人賽 Modern Web DAY 3

從 Canvas 到各式各樣的 Web API 之旅系列第 3 篇

技術 Day 3 - Canvas API 基本用法篇

昨天介紹了 Canvas 的誕生與崛起，瞭解了 Canvas 的重要性後，終於要開始實作了！正文開始前先簡介，Canvas API 是 HTML5 Web A...

丸子 ‧ 2025-09-16

4 Like 0 留言 133 瀏覽

鐵人賽 Modern Web DAY 2

從 Canvas 到各式各樣的 Web API 之旅系列第 2 篇

技術 Day 2 - Canvas 的誕生與崛起

Canvas API 是 HTML5 Web API 中的重要功能，為開發者提供了強大的 2D 繪圖工具，能用於動畫、互動遊戲、數據可視化（像是前端熟悉的 EC...

丸子 ‧ 2025-09-15

4 Like 0 留言 151 瀏覽

鐵人賽 Modern Web DAY 1

從 Canvas 到各式各樣的 Web API 之旅系列第 1 篇

技術 Day 1 - 參賽動機與前言

大家好，我是 Alice Yen（丸子），一名前端工程師。我希望自己成為能清晰表達、在技術場合侃侃而談的工程師。參加鐵人賽正是一個磨練的機會，透過連續書寫的節...

丸子 ‧ 2025-09-14

0 Like 0 留言 1319 瀏覽

技術獨立開發者自建APP怎麼實現美顏接入的？

什麼是美顏 API？隨著TikTok等平台的興起，越來越多的獨立開發者做直播平台和視頻平台，美顏 API 的需求也越來越高。所謂的美顏濾鏡API是一種應用程...

venzil ‧ 2025-03-05

0 Like 0 留言 2398 瀏覽

鐵人賽 Python DAY 26

從概念到應用：Python實戰開發學習之旅系列第 26 篇

技術 [Day25] Python專案 - 網頁開發 - (4) Fast API 進階後端工程師該思考的幾件事

目標我們在Day 23 學習到了後端框架的選擇以及簡單的CRUD[Day23] Python專案 - 網頁開發 - (2) 高速的服務提供者Fast API...

roni ‧ 2024-10-10

1 Like 1 留言 391 瀏覽

鐵人賽 Modern Web DAY 30

元素不可思議事件簿系列第 30 篇

技術 Day 30 - 寫在最後面的通常是未完待續

圖片來源：Facebook但鐵人賽沒有在跟你continue啦！！！歷經卅晝夜之紀錄，本元素不可思議事件簿終於此告一段落。謝同行旅伴一夥Jeremy、...

橘子 ‧ 2024-10-14 ‧團隊好想工作室 v8.0

1 Like 0 留言 470 瀏覽

鐵人賽 Modern Web DAY 29

元素不可思議事件簿系列第 29 篇

技術 Day 29 - 自主性感官子午線反應

似是腦中火爆之詞。圖片來源：梗圖倉庫本集沒有任何動物腦袋爆炸。本篇紀錄之不可思議事件為fullscreenchange與fullscreenerror事...

橘子 ‧ 2024-10-13 ‧團隊好想工作室 v8.0

1 Like 1 留言 197 瀏覽

鐵人賽 Modern Web DAY 28

元素不可思議事件簿系列第 28 篇

技術 Day 28 - 有時候運氣太好不一定是好事

圖片來源：Threads可能會交換靈魂也說不...呀哈。本篇紀錄不可思議事件：copy事件。事件其卅一：copy 此事件發生於人類複刻元素之內容之時，...

橘子 ‧ 2024-10-12 ‧團隊好想工作室 v8.0

0 Like 1 留言 616 瀏覽

鐵人賽 Modern Web DAY 27

元素不可思議事件簿系列第 27 篇

技術 Day 27 - 甲賀忍蛙從樹林中歸來

甲蛙樹歸也。圖片來源：動畫瘋你怎麼會覺得標題跟這篇內容有關？但甲賀忍蛙真的很帥！！！續前篇紀錄之change事件與input事件，本篇紀錄一示例分別以c...

橘子 ‧ 2024-10-11 ‧團隊好想工作室 v8.0

0 Like 0 留言 457 瀏覽

鐵人賽 Modern Web DAY 26

元素不可思議事件簿系列第 26 篇

技術 Day 26 - 如果喜歡講話算是輸出

圖片來源：自然主意。酷覓星擅於傾聽算是一種輸入嗎？前篇閱畢仍有疑惑，是否有更合適之事件可觀測輸入有關之元素之變化？故本篇紀錄其他與輸入有關之不可思議事件...

橘子 ‧ 2024-10-10 ‧團隊好想工作室 v8.0

1 Like 1 留言 245 瀏覽

鐵人賽 Modern Web DAY 25

元素不可思議事件簿系列第 25 篇

技術 Day 25 - 是時候做一些改變了

圖片來源：派星機好久不見派星機（沒有好久前篇閱畢或有疑惑，若輸入之符文不需啟動IME，如輸入英文、數字、符號等，此時何解？故本篇紀錄其他與輸入有關之不可...

橘子 ‧ 2024-10-09 ‧團隊好想工作室 v8.0

0 Like 0 留言 393 瀏覽

鐵人賽 Modern Web DAY 23

元素不可思議事件簿系列第 23 篇

技術 Day 23 - 對著隔壁正要打噴嚏的同學大叫

即可阻斷噴嚏之行為。若要維繫感情，切勿輕易嘗試。圖片來源：sohu可惡，被斷招了。本篇紀錄與前篇相關之不可思議事件：transitioncancel事件...

橘子 ‧ 2024-10-07 ‧團隊好想工作室 v8.0

2 Like 0 留言 395 瀏覽

鐵人賽 Modern Web DAY 22

元素不可思議事件簿系列第 22 篇

技術 Day 22 - 停滯期是身體的自我保護機制

記錄簿標題愈顯無理，然標題者，篇章之最難也。圖片來源：派星機♫如果沒梗圖就使用派星機♫ 本篇紀錄與前篇相關之不可思議事件：transitionend事件。...

橘子 ‧ 2024-10-06 ‧團隊好想工作室 v8.0

0 Like 0 留言 341 瀏覽

鐵人賽 Modern Web DAY 21

元素不可思議事件簿系列第 21 篇

技術 Day 21 - 放冰箱的東西還是會壞掉

老八：不如趕快吃掉。圖片來源：巴哈姆特動畫瘋官方統計《敗北女角太多了》八奈見杏菜動畫10集總共吃了「72416卡路里」。本篇紀錄之不可思議事件為tran...

橘子 ‧ 2024-10-05 ‧團隊好想工作室 v8.0

1 Like 0 留言 455 瀏覽

鐵人賽 Modern Web DAY 20

元素不可思議事件簿系列第 20 篇

技術 Day 20 - 來談談責任歸屬吧

圖片來源：梗圖倉庫已購買，老八愛吃。本篇藉前篇之小桃元素產生之問題，紀錄有發泡現象之focusin與focusout事件之事件委任應用。不可思議事件委...

橘子 ‧ 2024-10-04 ‧團隊好想工作室 v8.0

1 Like 1 留言 654 瀏覽

鐵人賽 Modern Web DAY 19

元素不可思議事件簿系列第 19 篇

技術 Day 19 - 毫無反應就是個小桃

圖片來源：大概也是Threads比瘋子更瘋就是成為瘋子。本篇紀錄與前篇介紹之focus與blur事件相似之不可思議事件：focusin與focusout...

橘子 ‧ 2024-10-03 ‧團隊好想工作室 v8.0

1 Like 1 留言 521 瀏覽

鐵人賽 Modern Web DAY 18

元素不可思議事件簿系列第 18 篇

技術 Day 18 - 最近朋友推薦我蓮霧麵茶

此友非友，可棄之也。圖片來源：Threads回收要記得分類，垃圾要記得丟喔！鼠輩之不可思議事件已大致於前篇介紹完畢。可喜可賀。本篇紀錄之不可思議事件為f...

橘子 ‧ 2024-10-02 ‧團隊好想工作室 v8.0

1 Like 1 留言 192 瀏覽

鐵人賽 Modern Web DAY 17

元素不可思議事件簿系列第 17 篇

技術 Day 17 - 對你的愛沒有盡頭

圖片來源：YouTube就像小垃圾永遠不嫌多。本篇紀錄與前篇之scroll事件相關之不可思議事件scrollend。事件其十六：scrollend 此...

橘子 ‧ 2024-10-01 ‧團隊好想工作室 v8.0

1 Like 1 留言 206 瀏覽

鐵人賽 Modern Web DAY 16

元素不可思議事件簿系列第 16 篇

技術 Day 16 - 轉轉轉好運大家一起來

歌詞竟是好運旺來一起來，竟非大家，著實惶恐。圖片來源：派星機我也需要。這期發票又沒中。本篇紀錄與前篇之wheel事件類似之不可思議事件scroll。事...

橘子 ‧ 2024-09-30 ‧團隊好想工作室 v8.0

1 Like 1 留言 379 瀏覽

鐵人賽 Modern Web DAY 15

元素不可思議事件簿系列第 15 篇

技術 Day 15 - 只要轉圈就高興的向日葵籽

圖片來源：梗圖倉庫字是我上的，哈姆派郎。本篇續紀錄鼠輩之不可思議事件：wheel。事件其十四：wheel 此事件於鼠輩中央頭頂處之鼠輪滾動時發生，或其...

橘子 ‧ 2024-09-29 ‧團隊好想工作室 v8.0

1 Like 0 留言 230 瀏覽

鐵人賽 Modern Web DAY 13

元素不可思議事件簿系列第 13 篇

技術 Day 13 - 如果有很多屁股也不叫buttons

當一鼠屁為極品，多鼠屁則可稱之為天堂。圖片來源：我雖然沒有很多倉鼠屁屁，倒是可以多摸幾下。本篇將續紀錄鼠輩事件之buttons屬性。鼠輩事件之butt...

橘子 ‧ 2024-09-27 ‧團隊好想工作室 v8.0

1 Like 0 留言 233 瀏覽

鐵人賽 Modern Web DAY 12

元素不可思議事件簿系列第 12 篇

技術 Day 12 - 屁股的英文不是button

若將兩者錯放，極尷尬也。圖片來源：我每個倉鼠屁屁都是極品。本篇將紀錄前篇提及之鼠輩事件button屬性。鼠輩事件之button屬性與點按鼠輩及放開鼠...

橘子 ‧ 2024-09-26 ‧團隊好想工作室 v8.0